'use client';

import React, { useEffect, useRef, useState } from 'react';
import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite';
import 'react-markdown-editor-lite/lib/index.css';
import Link from 'next/link';
import { Button } from '@/app/ui/button';
import { updatePost } from '@/app/lib/actions';
import { useFormState } from 'react-dom';

const mdParser = new MarkdownIt(/* Markdown-it options */);

export default function EditForm({ post }: any) {
  const [content, setContent] = useState<string>('');
  const initialState = { message: null, errors: {} };
  const updatePostWithId = updatePost.bind(null, post?.id);
  const [state, dispatch] = useFormState(updatePostWithId, initialState);

  useEffect(() => {
    if (post) {
      setContent(post.content);
    }
  }, [post]);

  const ref = useRef<MdEditor | null>(null);

  // 编辑器内容改变
  const handleEditorChange = ({ html, text }: any) => {
    console.log('handleEditorChange', html, text);
    setContent(text);
  };

  return (
    <form action={dispatch}>
      <div className="rounded-md bg-gray-50 p-4 md:p-6">
        {/* Post Title */}
        <div className="mb-4">
          <label htmlFor="title" className="mb-2 block text-sm font-medium">
            Choose an Title
          </label>
          <div className="relative mt-2 rounded-md">
            <div className="relative">
              <input
                id="title"
                name="title"
                defaultValue={post?.title}
                placeholder="Enter Post Title"
                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
                aria-describedby="amount-error"
              />
            </div>
          </div>
        </div>
        <div aria-live="polite" aria-atomic="true">
          {state.message ? (
            <p className="my-2 text-sm text-red-500">{state.message}</p>
          ) : null}
        </div>
      </div>
      <MdEditor
        value={content}
        style={{ height: '400px' }}
        renderHTML={(text) => {
          return mdParser.render(text);
        }}
        onChange={handleEditorChange}
        ref={ref}
        view={{
          menu: true,
          md: true,
          html: false,
        }}
        canView={{
          both: false,
          menu: true,
          md: true,
          html: false,
          fullScreen: false,
          hideMenu: true,
        }}
      />
      <textarea
        defaultValue={content}
        value={content}
        name="content"
        id="content"
        className=" hidden"
        placeholder="content"
      />
      <div className="mt-6 flex justify-end gap-4">
        <Link
          href="/dashboard/posts"
          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
        >
          Cancel
        </Link>
        <Button type="submit">Edit Post</Button>
      </div>
    </form>
  );
}
